<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-13 10:45:04
 * @LastEditTime: 2023-11-01 17:15:17
-->
<template>
    <div class="tranTemp1">
        <div class="tranTemp2">{{ $t('text.router.l34') }}</div>
        <div class="tranTemp3" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
            <div class="tranTemp4 tranTemp13">
                <DialogLayout47 @returnData="refresh" isAdd>
                    <div class="tranTemp13">
                        <div class="tranTemp11">+</div>
                        <div class="tranTemp12">{{ $t('text.Contract.l114') }}</div>
                    </div>
                </DialogLayout47>
            </div>
            <div class="tranTemp4" v-for="(item,index) in templateList" :key="item">
                <div class="tranTemp5">
                    <div class="tranTemp6">{{ item.name }}</div>
                    <div class="tranTemp7">{{ item.stepCount }} {{ $t('text.Contract.l111') }}</div>
                </div>
                <div class="tranTemp8">
                    <div class="tranTemp9">
                        <DialogLayout47 isEdit :templateId="item.id" :index="index" :title="item.name" @returnData="refreshEdit">{{
                            $t('text.Contract.l112') }}</DialogLayout47>
                    </div>
                    <div class="tranTemp10">
                        <DialogLayout54  :editId="item.id" :index="index"  @returnData="deleteEdit">{{ $t('text.Contract.l113') }}</DialogLayout54>
                    </div>
                </div>
            </div>
        </div>
        <p v-if="loading">Loading...</p>
        <p v-if="disabled">No more</p>
    </div>
</template>
    
<script>
import DialogLayout47 from "@/components/dialogLayout/DialogLayout47.vue"
import { findTemplateList } from '../../http/api'
import DialogLayout54 from "@/components/dialogLayout/DialogLayout54.vue"
export default {
    name: "HomeView",
    components: { DialogLayout47, DialogLayout54 },
    data() {
        return {
            pageNo: 0,
            templateList: [],
            loading: false,
            disabled: false
        }
    },
    mounted() {
    },
    methods: {

        load() {
            if (!this.disabled && !this.loading) {
                this.pageNo = this.pageNo + 1
                this.loading = true
                this.getdata()
            }
        },

        getdata() {
            findTemplateList({ pageNo: this.pageNo, pageSize: 25 }).then(res => {
                if (res !== undefined) {
                    this.templateList = [...this.templateList, ...res.dataList]
                    if (this.templateList.length >= res.total) {
                        this.disabled = true
                    }
                } else {
                    this.disabled = true
                }
                this.loading = false
            }).catch()
        },
        refresh() {
            findTemplateList({ pageNo: 1, pageSize: 1 }).then(res => {
                if (res !== undefined) {
                    this.templateList = [...res.dataList, ...this.templateList]
                }
            }).catch()
        },
        refreshEdit(paramsList,index) {
            this.templateList[index] = { id: paramsList.id, name: paramsList.name, stepCount: paramsList.steps.length }
        },
        deleteEdit(index){
            this.templateList.splice(index,1)
        }

    },
    watch: {},
    computed: {},
}
</script>
    
<style scoped>
.tranTemp1 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tranTemp2 {
    height: 50px;
    line-height: 50px;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0px 5px 10px 3px #eee;
    position: sticky;
    top: 29px;
    background: white;
}

.tranTemp3 {
    display: flex;
    flex-wrap: wrap;
    padding-left: 50px;
    padding-right: 30px;
    padding-top: 50px;
    padding-bottom: 30px;
}

.tranTemp4 {
    /* flex: 1;
    min-width: calc(25% - 30px); */
    width: calc(25% - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
    background: #7ba8ff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px 1px #d0d0d0;
    min-height: 132px;
}

.tranTemp6 {
    text-align: left;
    padding: 0px 20px;
    padding-top: 25px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.tranTemp7 {
    text-align: left;
    padding: 10px 20px;
    font-size: 13px;
    color: white;
    padding-bottom: 20px;
}

.tranTemp8 {
    display: flex;
    height: 30px;
    line-height: 30px;
    background: white;
    border-radius: 0px 0px 10px 10px;
    padding: 5px 0;
}

.tranTemp9 {
    flex: 1;
    color: #6698ff;
    font-size: 14px;
    border-right: 1px solid #eee;
    white-space: nowrap;
}

.tranTemp10 {
    flex: 1;
    color: #ff7f7f;
    font-size: 14px;
    white-space: nowrap;
}

.tranTemp11 {
    background: #7ba8ff;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    line-height: 18px;
    font-weight: 600;
    text-align: center;
}

.tranTemp12 {
    font-size: 15px;
    font-weight: 600;
    color: #7ba8ff;
    padding-top: 5px;
}

.tranTemp13 {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>